<template>
  <div id="t2">
    <span 

    @click="select(index)" v-for="(item, index) in list"
     :key="index" 
     :class="{ active: activeIndex === index }">
     {{item}}
     </span>
  </div>
</template>

<script>
export default {
  name: "Select",
  props: {
    select_data: {
      type: Array,
      default() {
        return [];
      },
    },
    kong_:{
      type:Array,
      default() {
        return [];
      },
    }
  },
  data() {
    return {
      list: [],
      value: "",
      show: true,
      //自己的一个位移数组
      trasition:[],
      activeIndex: -1,
    };
  },
  created() {
    this.list = this.select_data;
    this.trasition=[
      {
        x:0,
        y:0,
      },
      {
        x:0,
        y:0,
      }
    ]
  },
  methods: {
    select(index) {
      this.activeIndex = index;
      console.log(this.select_data[index]);
      this.$emit("select", this.select_data[index]);
    },
  },
};
</script>

<style scoped>
#t2 {
  position: absolute;
  margin-top: 300px;
  text-align: center;
  width: 330px;
  margin-left: 190px;
}
span {
  display: inline-block;
  border: 1px solid rgb(50, 147, 212, .8);
  line-height: 30px;
  width: 30px;
  height: 30px;
  margin-left: 5px;
  cursor: pointer;
}
.active {
  color: #fff;
  background: rgb(50, 147, 212, .8);
}
</style>